<script setup>

import service from '@/utils/request.utils';
import { onBeforeMount, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { RESPONSE_MESSAGE } from '@/constant/response';

const createGroup = ref({
    "name": ""
})

const groups = ref([])
const group_users = ref([])
const controlPanel = ref(null)
const permissions = ref([])
const permission = ref(null)
const InvatationCode = ref('')
const dialogVisible = ref(false)
const signature = ref(null)

async function createGroupFunc() {
    if (createGroup.value.name.length != 0) {
        let res = await service.post("/group/create", { "groupName": createGroup.value.name })
        console.log(res)
        if (res.status != 200) {
            ElMessage({
                message: '操作失败: ' + res.status,
                type: 'error'
            })
            return
        }

        if (res.data.code != '0') {
            console.log(res.data)
            ElMessage({
                message: RESPONSE_MESSAGE[res.data.code],
                type: "warning"
            })
            return
        } else {
            ElMessage({
                message: RESPONSE_MESSAGE[res.data.code],
                type: "success"
            })
            await queryGroups()
            return
        }
    }
}

async function queryGroups() {
    controlPanel.value = null
    group_users.value = []
    let res = await service.post("/group/querys")
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
        return
    } else {
        groups.value = res.data.data
        // ElMessage({
        //     message: RESPONSE_MESSAGE[res.data.code],
        //     type: "success"
        // })
        return
    }
}

async function queryGroupUsers(group) {
    console.log(group)
    let res = await service.post("/group/query", { "groupId": group.group_id })
    controlPanel.value = group
    permission.value = null
    let pers = []
    if (group.permission > 1) {
        pers.push({ "label": "普通成员", "value": 0 })
        pers.push({ "label": "操作员", "value": 1 })
        if (group.permission > 2) {
            pers.push({ "label": "管理员", "value": 2 })
        }
    }
    permissions.value = pers
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
        return
    } else {
        let data = res.data.data
        for (let index in data) {
            let i = data[index]
            i["avatar"] = import.meta.env.VITE_STATIC_ADDR + "avatar/" + i["avatar"]
        }

        group_users.value = res.data.data
        // ElMessage({
        //     message: RESPONSE_MESSAGE[res.data.code],
        //     type: "success"
        // })
        return
    }
}

async function getInvationCode() {
    if (controlPanel.value == null) {
        ElMessage.error("请选择一个群组！")
        return
    }
    if (permission.value == null) {
        ElMessage.error("请选择一个权限！")
        return
    }
    let res = await service.post("/group/getInvationCode", { "permission": permission.value, "groupId": controlPanel.value.group_id })
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
        return
    } else {
        InvatationCode.value = res.data.data
        // ElMessage({
        //     message: RESPONSE_MESSAGE[res.data.code],
        //     type: "success"
        // })
        dialogVisible.value = true
        return
    }
}

async function exitGroup() {
    if (controlPanel.value == null) {
        ElMessage.error("请选择一个群组！")
        return
    }

    let res = await service.post("/group/exit", { "groupId": controlPanel.value.group_id })
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: res.data.msg,
            type: "warning"
        })
        return
    } else {
        ElMessage({
            message: "退出群组成功",
            type: "success"
        })
        await queryGroups()
        return
    }
}

async function deleteGroup() {
    if (controlPanel.value == null) {
        ElMessage.error("请选择一个群组！")
        return
    }
    let res = await service.post("/group/delete", { "groupId": controlPanel.value.group_id })
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: res.data.msg,
            type: "warning"
        })
        return
    } else {
        ElMessage({
            message: "删除群组成功",
            type: "success"
        })
        await queryGroups()
        return
    }
}

async function joinGroup() {
    if (signature.value == null) {
        ElMessage.error("请选择一个群组！")
        return
    }
    console.log(permission)
    let res = await service.post("/group/join", { "signature": signature.value })
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: res.data.msg,
            type: "warning"
        })
        return
    } else {
        ElMessage({
            message: "添加群组成功",
            type: "success"
        })
        await queryGroups()
        return
    }
}

onBeforeMount(async () => {
    await queryGroups()
})

</script>
<template>
    <div id="outer">
        <el-dialog v-model="dialogVisible" title="邀请码" width="500" :before-close="handleClose">
            <div style="margin-bottom: 1em;"></div>
            <span>{{ InvatationCode }}</span>
            <div style="margin-top: 1em;">该邀请码仅有10分钟有效期</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <div class="col">
            <div class="row">
                <div class="title">
                    群组列表
                </div>
                <div class="content">
                    <div class="groupItem" v-for="item in groups" key="item.group_id" @click="queryGroupUsers(item)">
                        <div class="groupName">{{ item.group_name }}</div>
                        <div v-if="item.permission >= 4" class="group_permission red_permission">创建者</div>
                        <div v-else-if="item.permission >= 2" class="group_permission yello_permission">管理员</div>
                        <div v-else-if="item.permission >= 1" class="group_permission greent_permisson">操作员</div>
                        <div v-else class="group_permission common_permission">普通用户</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="title">
                    组员列表
                </div>
                <div class="content">
                    <div class="groupItem" v-for="item in group_users" key="item.group_id">
                        <div class="userInfo">
                            <div class="avatarOuter">
                                <el-avatar :src="item.avatar" style="width:100%;height:100%;" />
                            </div>
                            <div>{{ item.nickname }}</div>
                        </div>
                        <div v-if="item.permission >= 4" class="group_permission red_permission">创建者</div>
                        <div v-else-if="item.permission >= 2" class="group_permission yello_permission">管理员</div>
                        <div v-else-if="item.permission >= 1" class="group_permission greent_permisson">操作员</div>
                        <div v-else class="group_permission common_permission">普通用户</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="title">
                    管理群组
                </div>
                <div class="content" v-if="controlPanel != null">
                    <div class="controlPanelInfoHeader">
                        <el-form-item label="群组名称：">
                            {{ controlPanel.group_name }}
                        </el-form-item>
                        <el-form-item label="成员数量：">
                            {{ group_users.length }}
                        </el-form-item>
                        <el-form-item label="拥有权限：">
                            {{ controlPanel.permission >= 4 ? "创建者" : controlPanel.permission >= 2 ? "管理员" :
                                controlPanel.permission >= 1 ? "操作员" : "普通用户" }}
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item class="operateGroup" v-if="controlPanel.permission > 1" label="邀请码生成">
                            <el-select v-model="permission" placeholder="选择权限" style="width: 240px">
                                <el-option v-for="item in permissions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-button @click="getInvationCode" type="info" style="margin-left: 10px;">生成邀请码</el-button>
                        </el-form-item>
                        <el-button @click="deleteGroup" v-if="controlPanel != null && controlPanel.permission >= 4"
                            style="margin-left: 30em;margin-top: 2em;" type="danger">删除群组</el-button>
                        <el-button @click="exitGroup" v-else-if="controlPanel != null"
                            style="margin-left: 30em;margin-top: 2em;" type="warning">退出群组</el-button>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="title">
                    群组操作
                </div>
                <div class="content">
                    <el-form-item class="createGroup" label="创建群组">
                        <el-input placeholder="请为你的群组取一个名字" v-model="createGroup.name" />
                    </el-form-item>
                    <div class="btn-outer">
                        <el-button class="btn" @click="createGroupFunc" type="info">创建</el-button>
                    </div>

                    <el-form-item class="createGroup" label="加入群组">
                        <el-input placeholder="请输入邀请码" v-model="signature" />
                    </el-form-item>
                    <div class="btn-outer">
                        <el-button class="btn" @click="joinGroup" type="info">加入</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
#outer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.userInfo {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: normal;
}

.avatarOuter {
    position: relative;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    padding-right: 1em;
    overflow: hidden;
}

.col {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.row {
    height: 50%;
    width: 100%;
    box-shadow: var(--el-box-shadow-light)
}

.title {
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 1.2em;
    font-weight: 500;
}

.content {
    border-top: thick double gainsboro;
    position: relative;
    overflow: auto;
}

.createGroup {
    width: 80%;
    margin: auto;
    margin-top: 3em;
    position: relative;
}

.operateGroup {
    width: 80%;
    margin: auto;
    margin-top: 10px;
    position: relative;
}

.btn-outer {
    width: fit-content;
    position: relative;
    margin-left: 80%;
}

.btn {
    margin-top: 2em;
    position: relative;
    right: 2px;
}

.groupItem {
    display: flex;
    flex-direction: row;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px rgb(240, 240, 240) solid;
    font-size: 1em;
}

.groupItem:hover {
    background-color: rgb(245, 245, 245);
}

.groupName {
    font-weight: 700;
}

.group_permission {
    font-size: 1em;
}

.red_permission {
    color: red;
    font-weight: bolder;
}

.red_permission {
    color: red;
    font-weight: bolder;
}

.red_permission {
    color: red;
    font-weight: bolder;
}

.common_permission {
    color: red;
    font-size: smaller;
    font-weight: 400;
}

.controlPanelInfoHeader {
    margin-top: 1em;
    padding-left: 2em;
    border-bottom: 2px rgb(245, 245, 245) solid;
}
</style>